<template>
  <div class="zuida">
    <!-- <div class="zheng"><h1>我的</h1></div> -->
    <div class="beijing"></div>
    <div class="zi">
      <div class="tou demo-image__preview">
        <!-- <img :src="shuju.tou" alt=""> -->
        <el-image 
    style="width: 100px; height: 100px"
    :src="shuju.tou" 
    :preview-src-list="[shuju.tou]">
  </el-image>
        
      </div>
      <div class="name">
        <div class="name1">{{shuju.user}}</div>
      <!-- <div class="age">年龄:3天</div> -->
      <div class="bianji" @click="bianji">编辑资料</div>
      </div>
      <div class="qianming">{{shuju.qianming}}</div>
      <!-- <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span> -->
       <el-divider>嘻嘻,我是分割线~~</el-divider>
    </div>

  </div>
</template>
<script>
// import Tou from './zujian/shang.vue'
export default {
  components:{
    // Tou
  },
  data(){
    return {
      index:'6-1',
      shuju:{}
    }
  },
  methods:{
    bianji(){
      this.$router.push('/bianji')
    }
  },
  mounted(){
    this.$store.commit('indexbian',this.index)
    
  },
  created(){
      this.$store.commit('bianhui')
      
    var user=JSON.parse(sessionStorage.getItem("user"))
    // console.log(user.id);
    // this.axios.get('/wode',{id:user.id
    // }).then((res)=>{
    //   console.log(res);
    // })
    this.axios.get('/wode/'+user.id).then((res)=>{
      console.log(res.data[0]);
      this.shuju=res.data[0]
    })
    }
    
}
</script>
<style lang="less" scoped>
  .zuida{
    margin-top: 20px;
    margin: 0 auto;
    width: 80%;
    height: 600px;
    // background-color: red;
    
    // background-image: url('../../../../wjk_tu/001.jpg');
    // ba
  }
  .beijing{
    width: 100%;
    height: 300px;
    background-image: url('../img/wode_background.jpg');
    // backim
    background-size: 100% ;
  }
  // .zheng{
  //   width: 100%;
  //   height: 100%;
  //   background-color: red;
  // }
  .zi{
    width: 100%;
    height: 300px;
    background-color: rgba(135, 235, 205, 0.808);
    // margin-bottom: 50px;
  }
  .tou{
    display: flex;
    position: relative;
    top:-50px;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    margin-top: -30px;
    overflow: hidden;
    border-radius: 20px;
    img{
      
      
      width: 100%;
    }
  }
  .name{
    width: 700px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin: 0 auto;
    display: flex;
    justify-content:space-around;
    .name1{
      font-size: 20px;
    }
    .age{
      // padding: 10px;
      background-color: red;
      width: 130px;
      // margin-left: 100px;
      font-size: 16px;
      border-radius: 4px;
      // line-height: 40px;
      // height: 100%;

    }
    .bianji{
      width: 100px;
      height: 100%;
      background-color: rgb(16, 213, 154);
      border-radius: 50px;
      // margin-left: ;
    }
  }
  .qianming{
    margin-top: 20px;
    line-height: 50px;
    font-size: 18px;
    width: 600px;
    color: #757575;
    height: 50px;
    margin: 0 auto;
  }
</style>